<template>
	<div class="my-push">
		<h3>内推消息设置(不设置地区或职位则默认全部推送)</h3>
		<div class="my-push-list">
			<div class="my-push-set">是否推送: <el-switch @change="interpolateChange" v-model="data.pushValue" /></div>
			
			<div class="my-push-address">选择推送地区：
				  <el-cascader
				  	placeholder="请选择工作地址"
				  	v-model="data.push_address"
				  	:options="data.addressOptions"
					 :props="data.props"
					 clearable
				  	>
				  </el-cascader>
			</div>
			<div class="my-push-job">选择推送职位：
				<el-select multiple v-model="data.push_job" filterable placeholder="请选择职位">
					<el-option
					  v-for="item in data.jobOptions"
					  :key="item.value.toString()"
					  :label="item.label"
					  :value="item.value.toString()">
					</el-option>
				</el-select>
			</div>
			
		</div>
		<el-button type="primary" @click="onSubmit">提交</el-button>
	</div>
</template>

<script lang="ts" setup>
	import { ref,reactive,onMounted } from 'vue'
	import { ElMessage } from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'
	import {HttpPushSet,HttpPersonal,HttpGetjobType} from '../../public/http'
	import city from "../../public/city"
	import type { UploadProps } from 'element-plus'
	import { inject } from "vue";
	const store = inject('store')
	const router = inject('router')
	
	
	let data = reactive({
		props:{ multiple: true },
		pushValue:false,
		push_job:"",
		push_address:"",
		addressOptions:[],
		jobOptions:[]
	})
	// 基本信息
	const personalMain = ()=>{
		HttpPersonal().then((res)=>{
			if(res&&res.code === 200){
				data.pushValue = res.data.push_type?true:false
				data.push_job = res.data.push_job?res.data.push_job.split(","):""
				// data.push_address = res.data.push_address
				if(!res.data.push_address){
					data.push_address = ""
					return
				}
				let pushAddress = res.data.push_address.split("&")
				data.push_address = []
				pushAddress.forEach((res,index)=>{
					data.push_address[index] = []
					data.push_address[index] = res.split(',')
				})
				
			}
		})
	}
	
	const interpolateChange = (val)=>{
		data.pushValue = val
	}
	const onSubmit = ()=>{
		let pushAddress = ""
		
		if(Array.isArray(data.push_address)){
			data.push_address.forEach((res)=>{
				
				pushAddress += res.toString()+'&'
			})
		}
		HttpPushSet({
			push_job:data.push_job.toString(),
			push_address:pushAddress.slice(0,pushAddress.length-1),
			push_type:data.pushValue?1:0,
		}).then((res:any)=>{
			if(res.code === 200){
				ElMessage({
				    message: '修改成功',
				    type: 'success',
				})
				return;
			}
			ElMessage({
			    message: res.message,
			    type: 'warning',
			})
		})
	}
	// 获取城市、职位基本数据
	const getCityMain = async ()=>{
		let index = 0
		for(let k in city){
			
			data.addressOptions.push({
				label:city[k].name,
				value:k,
				children:[]
			})
			for(let c in city[k].child){
				data.addressOptions[index].children.push({
					label:city[k].child[c].name,
					value:c,
				})
			}
			index++
		}
		// 职位
		const result = await HttpGetjobType()
		if(result.code === 200){
			result.data.jobData.forEach((res)=>{
				data.jobOptions.push({
					label:res.name,
					value:res.id
				})
			})
		}
		
		
	}
	onMounted(()=>{
		
		getCityMain()
		personalMain()
	})
	
</script>

<style lang="scss">
	.my-push{
		width: 100%;
		height: calc(100%);
		overflow: hidden;
		background: #efedee;
		padding: 10px 10px 0 10px;
		box-sizing: border-box;
		
		input{
			height: 25px;
			width: 200px;
			border-radius: 5px;
		}
		.el-switch__core{
			height: 16px;
		}
		.my-push-set{
			font-size: 15px;
			color: #606266;
			margin-top: 30px;
		}
		.el-switch__action{
			top: -1px;
		}
		.my-push-job{
			font-size: 15px;
			color: #606266;
			margin: 10px 0 20px 0;
		}
		.my-push-address{
			font-size: 15px;
			color: #606266;
			margin: 20px 0;
		}
		.my-push-list{
			margin-left: 20px;
		}
		button{
			width: 150px;
			height: 35px;
			margin-top: 30px;
			margin-left: 20px;
		}
	}
</style>
